<template>
  <div class="formBox">
    <a-alert class="fromTips" v-if="message" :message="message" type="warning" show-icon />
    <div class="lines" style="margintop: 5px"></div>
    <a-form-model :model="form" ref="ruleForm" layout="inline" :wrapper-col="wrapperCol">
      <div class="rows" v-for="(item, ind) in formInfos" :key="ind" :style="{ width: item.width + 'px' }">
        <!-- 标准控件 -->
        <!-- input -->
        <a-form-model-item v-if="item.type=='input'" :prop="item.name">
          <a-input v-model="form[item.name]" :disabled ="item.isDisabled" :placeholder="item.placeholder"/>
        </a-form-model-item>
        <!-- 带搜索input -->
        <a-form-model-item v-if="item.type=='inputsearch'" :label="item.label" :prop="item.name">
          <a-input-search v-model="form[item.name]" :disabled ="item.isDisabled" :placeholder="item.placeholder" enter-button @search="inputOnSearch" />
          <!-- <a-input v-model="form[item.name]" :disabled ="item.isDisabled" :placeholder="item.placeholder"/> -->
        </a-form-model-item>
        <!-- 带按钮的input -->
        <a-form-model-item v-if="item.type=='inputbtn'" :label="item.label" :prop="item.name">
          <a-input-search :placeholder="item.placeholder"  @search="inputbtnOnSearch">
            <a-button slot="enterButton">
              {{item.btnname}}
            </a-button>
          </a-input-search>
        </a-form-model-item>
        <!-- number -->
        <a-form-model-item v-if="item.type=='number'" :label="item.label" :prop="item.name">
          <a-input v-model="form[item.name]" type='number' :min="1" :disabled ="item.isDisabled"  :placeholder="item.placeholder"/>
        </a-form-model-item>
        <!-- textarea -->
        <a-form-model-item v-if="item.type=='textarea'"   :prop="item.name">
            <a-input  v-model="form[item.name]" type="textarea" :placeholder="item.placeholder"/>
        </a-form-model-item>
        <!-- select -->
        <a-form-model-item  v-if="item.type=='select'"  :prop="item.name" >
          <a-select v-model="form[item.name]" :placeholder="item.placeholder" @change="onSelectChange($event,item.link)" >
            <a-select-option v-for="(opt,ind) in item.options" :key="ind" :value="opt.id">
              {{opt.value}}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <!-- radio -->
        <a-form-model-item  v-if="item.type=='radio'" :label="item.label" :prop="item.name">
            <a-radio-group v-model="form[item.name]"  @change="radioOnChange($event,item.name)">
                <a-radio-button v-for="(opt,ind) in item.options" :key="ind" :value="opt.id">
                    {{opt.value}}
                </a-radio-button>
            </a-radio-group> 
        </a-form-model-item>
        <!-- 生产日期 -->
        <a-form-model-item  v-if="item.type=='productDate'" :label="item.label" :prop="item.name">
          <a-date-picker
            v-model="form[item.name]"
            :disabled-date="disabledAfterDate"
            :disabled ="item.isDisabled"
            placeholder="生产日期"
            @change="(date,dateString)=>dateOnChange(date,dateString,item.name)"
            />
        </a-form-model-item>
        <!-- 有效期 -->
        <a-form-model-item  v-if="item.type=='expiryDate'" :label="item.label" :prop="item.name">
          <a-date-picker
            v-model="form[item.name]"
            :disabled-date="disabledBeforeDate"
            :disabled ="item.isDisabled"
            placeholder="有效期"
            @change="(date,dateString)=>dateOnChange(date,dateString,item.name)"
            />
        </a-form-model-item>
        <!-- datatime -->
        <a-form-model-item  v-if="item.type=='datatime'" :label="item.label" :prop="item.name">
          <a-date-picker 
            v-model="form[item.name]"
            @change="(date,dateString)=>dateOnChange(date,dateString,item.name)" />
        </a-form-model-item>
        <!-- datarange -->
        <a-form-model-item  v-if="item.type=='datarange'"  :prop="item.name"  >
          <a-range-picker
            v-model="form[item.name]"
            :ranges="{}"
            @change="(dates,dateStrings)=>datarangeOnChange(dates,dateStrings,item.name)"
          />
        </a-form-model-item>
        <!-- 复合控件 -->
        <!-- datatimeR -->
        <a-row v-if="item.type=='datatimeR'">
          <a-col :span="labelCol.span" ><div class="labels">{{item.label[0]}} <span style="margin: 0 8px 0 2px">:</span> </div></a-col>
          <a-col :span="wrapperCol.span">
           <a-row>
              <a-col :span="9">
              <a-form-model-item   :prop="item.name[0]" :label-col="{ span: 0}" :wrapper-col="{ span: 24}" >
                <a-date-picker 
                  size="small" v-model="form[item.name[0]]"
                  @change="(date,dateString)=>dateOnChange(date,dateString,item.name[0])" />
              </a-form-model-item>
            </a-col>
            <a-col :span="15">
              <a-form-model-item :label="item.label[1]"   :prop="item.name[1]" :label-col="{ span: 4}" :wrapper-col="{ span: 20}" >
                <a-date-picker
                  :disabled ="isDisabled"
                  size="small"
                  v-model="form[item.name[1]]"
                  @change="(date,dateString)=>dateOnChange(date,dateString,item.name[1])" />
                  <a-checkbox style="marginLeft:5px" @change="onChangeLong($event,item.name[1])">
                    长期
                  </a-checkbox>
              </a-form-model-item>
            </a-col>
           </a-row>
          </a-col>
        </a-row>
        <!-- 字典选择 -->
        <a-form-model-item  v-if="item.type=='dicselect'"  :prop="item.name" >
          <DictSelect
            :dictCategory="item.dicName"
            :showCode="item.showCode"
            :placeholder="item.placeholder" 
            @change="dicSelectChange($event,item.name)"
            :value="form[item.name]" >
          </DictSelect>
        </a-form-model-item>
        <!-- 单位选择组件 -->
        <a-form-model-item v-if="item.type==='orgselect'"  :prop="item.name" >
          <OrgSelect
            :disabled="item.isDisabled"
            :placeholder="item.placeholder" 
            @change="orgChange($event,item.name)"
            :value="form[item.name]">
          </OrgSelect>
        </a-form-model-item>
        <!-- 业务控件 -->
        <!-- 注册证号Pid -->
        <a-form-model-item  v-if="item.type=='zchselect'"  :prop="item.name" >
          <regisLicenseSelect
            :value="form[item.name]"
            :zhuangTai="item.zhuangTai"
            @change="regisLicenseChange($event,item.name)"
            >
          </regisLicenseSelect>
        </a-form-model-item>
        <!-- 供应商select选择组件 -->
        <a-form-model-item  v-if="item.type=='supplier'"  :prop="item.name" >
          <SupplierSelect
            :disabled="item.isDisabled"
            :placeholder="item.placeholder" 
            :value="form[item.name]"
            @change="supplierChange($event,item.name)"
            >
          </SupplierSelect>
        </a-form-model-item>
        <!-- 供应商select选择组件 -->
        <a-form-model-item  v-if="item.type=='SupplierName'"  :prop="item.name" >
          <SupplierNameSelect
            :disabled="item.isDisabled"
            :placeholder="item.placeholder" 
            :value="form[item.name]"
            @change="customerChange($event,item.name)"
            >
          </SupplierNameSelect>
        </a-form-model-item>
        <!-- 客户select选择组件 -->
        <a-form-model-item  v-if="item.type=='customer'"  :prop="item.name" >
          <CustomerSelect
            :disabled="item.isDisabled"
            :placeholder="item.placeholder" 
            :value="form[item.name]"
            @change="customerChange($event,item.name)"
            >
          </CustomerSelect>
        </a-form-model-item>
        <!-- 销售产品 -->
        <a-form-model-item  v-if="item.type=='salegoods'"  :prop="item.name" >
          <SaleGoodsSelect
            :disabled="item.isDisabled"
            :placeholder="item.placeholder" 
            :value="form[item.name]"
            @change="salegoodsChange($event,item.name)"
            >
          </SaleGoodsSelect>
        </a-form-model-item>
        <!-- 采购单Select组件 -->
        <a-form-model-item v-if="item.type==='purOrderSelect'"   :prop="item.name" >
          <purOrderSelect
            :disabled="item.isDisabled"
            :placeholder="item.placeholder" 
            @change="onSelect(arguments,item.name)"
            :value="form[item.name]">
          </purOrderSelect>
        </a-form-model-item>
        <!-- 销售单Select组件 -->
        <a-form-model-item v-if="item.type==='saleOrderSelect'"   :prop="item.name" >
          <saleOrderSelect
            :disabled="item.isDisabled"
            :placeholder="item.placeholder" 
            @change="onSelect(arguments,item.name)"
            :value="form[item.name]">
          </saleOrderSelect>
        </a-form-model-item>
        <!-- 结算单Select组件 -->
        <a-form-model-item v-if="item.type==='settlementSelect'"   :prop="item.name" >
          <settlementSelect
            :disabled="item.isDisabled"
            :placeholder="item.placeholder" 
            @change="onSelect(arguments,item.name)"
            :value="form[item.name]">
          </settlementSelect>
        </a-form-model-item>
        <a-form-model-item v-if="item.type=='botton'"  :wrapper-col="{ span: 24}">
          <a-button class="btn" type="primary" v-if="item.label[0]"  @click="submitForm('ruleForm')">
            {{item.label[0]}}
          </a-button>
          <a-button class="btn" type="primary"  v-if="item.label[1]"  @click="resetForm('ruleForm')">
            {{item.label[1]}}
          </a-button>
        </a-form-model-item>
      </div>
    </a-form-model>
  </div>
</template>

<script>
import DictSelect from '@/views/sys/modules/DictSelect'
import moment from 'moment'
import regisLicenseSelect from '@/views/app/biz/regisLicense/regisLicenseSelect'
import SaleGoodsSelect from '@/views/app/biz/salesGoods/SaleGoodsSelect'
import CustomerSelect from '@/views/app/biz/customer/CustomerSelect'
import SupplierSelect from '@/views/app/biz/supplier/SupplierSelect'
import SupplierNameSelect from '@/views/app/biz/supplier/SupplierNameSelect'
import OrgSelect from '@/views/sys/modules/OrgSelect' 
import settlementSelect from '@/views/app/biz/settlement/settlementSelect' 
import purOrderSelect from '@/views/app/biz/purchaseOrder/purOrderSelect' 
import saleOrderSelect from '@/views/app/biz/saleOrder/saleOrderSelect' 
export default {
  components: {
    DictSelect,
    regisLicenseSelect,
    SaleGoodsSelect,
    CustomerSelect,
    SupplierSelect,
    SupplierNameSelect,
    OrgSelect,
    settlementSelect,
    purOrderSelect,
    saleOrderSelect
  },
  props: {
    formInfos: {
      type: Array,
    },
    formDatas: {
      type: Object,
    },
    message: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      //:awrapperCol="awrapperCol"
      labelCol: { span: 0 },
      wrapperCol: { span: 24 },
      alabelCol: { style: 'width: 90px' },
      form: this.formDatas,
      forms: {},
      ischange: false,
      gysOptions: [],
      isloadGys: false,
      isloadZch: false,
    }
  },

  computed: {
    awrapperCol() {
      return function (w) {
        let ww = w - 90 - 20 //总宽度-labelCol宽度-20
        return { style: 'width: ' + ww + 'px' }
      }
    }
  },
  // watch:{
  //   formDatas:{//深度监听，可监听到对象、数组的变化
  //       handler(val, oldVal){
  //         this.form={...val}
  //         // this.form = Object.assign(this.form, val)
  //         //  this.resetobj=JSON.parse(JSON.stringify(val))
  //       },
  //       deep:true //true 深度监听
  //   }
  // },
  mounted() {
    if (this.isloadGys) {
      this.supplierOption()
    } else if (this.isloadZch) {
      this.zchOption()
    }

    for (let ind in this.formInfo) {
      let inputindex = 'val' + ind
      console.log(inputindex)
      this.form[inputindex] = this.formInfo[ind].vmodel
    }
  },
  methods: {
    // 业务组件regisLicense change
    regisLicenseChange(val,name){
      this.form[name]=val
      this.$emit("onChangeType",name,val)
      //  this.$emit('onFind',this.form)
    },
    // 业务组件dicSelect change
    dicSelectChange(val,name){
      this.form[name]=val
      this.$emit("onChangeType",name,val)
      console.log('字典select',val);
    },
    inputOnSearch (val,name) {
      this.form[name]=val
      this.$emit("inputOnSearch",name,val)
    },
    inputbtnOnSearch (val,name) {
      this.form[name]=val
      this.$emit("onChangeType",name,val)
    },
    // 时间变化
    dateOnChange(date,dateString,name) {
      this.form[name] = dateString
      this.$emit("onChangeType",name,dateString)
      console.log(this.forms[name]);
    },
    disabledBeforeDate(current) {
      // Can not select days before today and today
      return current && current < moment().endOf('day');
    },
    disabledAfterDate(current) {
      // Can not select days before today and today
      return current && current > moment().endOf('day');
    },
    datarangeOnChange(dates,dateStrings,name){
      //  this.form[name] = dateStrings
      this.form[name] = dateStrings
      this.$emit("onChangeType",name,val)
    },
    // 时间止（包含长期）
    onChangeLong(e,name){
      console.log(e.target.checked);
      let isChecked=e.target.checked
      if(isChecked){
        this.isDisabled=true;
        this.form[name]=moment().add(100, 'Y');
        this.forms[name] = this.form[name].format('YYYY-MM-DD');
      }else{
        this.isDisabled=false;
        this.form[name]=null; 
      }
      this.$emit("onChangeType", name, this.forms[name])
    },
    // selectChange
    onSelectChange(val,link){
      if(link=='1'){//通过val查询二级select
        let link2Item=this.formInfos.find(item=>{//查询第一个二级select,如需查询多个或三级select,在此修改
          return item.link=='2'
        })
        if(link2Item){
          this.form[link2Item.name]=undefined
          link2Item.options=[{id:'0',value:'所有'},{id:'1',value:'A市'},{id:'2',value:'B市'}]
          console.log(link2Item);
        }
        // this.$emit("onChangeType", name, this.forms[name])
      }
    },
    radioOnChange(val,name){//切换时如果表单内容发生变化，则在调用该组件时在onChangeType中重新传入表单信息和数据
        // console.log(name);
        this.form[name] = val
        this.$emit("onChangeType",name,this.form[name])
    },
    customerChange(val,name){
      this.form[name]=val
      this.$emit("onChangeType",name,val)
    },
    supplierChange(val,name){
      this.form[name]=val
      this.$emit("onChangeType",name,val)
    },
    //通用下拉select组件返回函数onSelect，表单name统一绑定列表pid, onChangeType会返回name和选中记录val
    //val包含选中记录的pid和记录全部信息：val[0]表示选中的record中的pid,val[1]表示选中的record全部信息
    //例如： { label: '供应商名称', name: 'supplierOrgPid', type: 'supplier', placeholder: '请选择供应商名称' },
    onSelect(val,name){
      console.log(val,name);
      this.form[name]=val[0]
      this.$emit("onChangeType",name,val)
    },
    salegoodsChange (val,name) {
      // console.log(name);
        this.form[name] = val
        this.$emit("onChangeType",name,val)
    },
    imgUploaded(imgurl,name){
      this.form[name] = imgurl
      this.$emit("onChangeType",name, imgurl)
      console.log(imgurl);
    },
    // 单位选择Change
    orgChange (val, name) {
      console.log(val)
      console.log(name)
      this.form[name] = val
      this.$emit("onChangeType",name,this.form[name])
    },
    orgOnsearch(val1,  name) {
      console.log(val1)
      console.log(name)
      this.$emit("orgsearch",name, val1)
    },
    submitForm(formName) {
      this.ischange = false
      let submitdata = JSON.parse(JSON.stringify(this.form))
      for (let key in submitdata) {
        if (submitdata[key]) {
          this.ischange = true
        }
        for (let keys in this.forms) {
          if (key == keys) {
            submitdata[key] = this.forms[keys]
          }
        }
      }
      console.log('查询中', submitdata)
      this.$emit('onFind', submitdata, this.ischange)
    },
    resetForm(formName) {
      console.log('重置表单')
      this.$refs[formName].resetFields()
      this.ischange = false
      this.$emit('onFind', this.form, this.ischange)
    },
  },
}
</script>

<style scoped>
.lines {
  height: 0px;
  /* border-top: 1px solid #ccc; */
}
.formBox {
  /* padding: 10;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 50px 50px 50px;  
  background-color: #ccc;
  grid-gap: 10px; */
  /* padding-left: 5px; */
}

.rows {
  float: left;
  width: 150px;
  min-height: 40px;
  margin-right: 5px;
  /* border: 1px solid #000; */
}
.rows .ant-form-item {
  width: 100%;
}
.ant-form-item {
  margin: 0;
  /* border: 1px solid #e02; */
}
.btn {
  margin-right: 7px;
}
</style>

//用法:formInfos的name和formDatas的属性一定要按照顺序一一对应
// <search-layout :formInfos="formInfos" :formDatas="formDatas"></search-layout>
// formInfos:[
// {label:'平台订单号1',name:'oid',type:'input',placeholder:'请输入'},
// {label:'省',name:'adress1',type:'select',placeholder:'请选择',options:[{id:'0',value:'所有'},{id:'1',value:'四川'},{id:'2',value:'陕西'}],link:'1'},
// {label:'市',name:'adress2',type:'select',placeholder:'请选择',options:[{id:'0',value:'所有'},{id:'1',value:'成都'},{id:'2',value:'泸州'}],link:'2'},
// {label:'创建日期',name:'timeFrom',type:'datatime',placeholder:'请选择日期',},
// {label:'到',name:'timeTo',type:'datatime',placeholder:'请选择日期',},
// {label:'a3',name:'name',type:'input',placeholder:'请输入',},
// {label:'a2',name:'select1',type:'select',placeholder:'请选择',options:[{id:'0',value:'所有'},{id:'1',value:'a'},{id:'2',value:'b'}],link:'2'},
// {label:'查询',name:'btn',type:'btn',},
// ],
// formDatas:{
// oid:'12315',
// adress1:'1',
// adress2:'',
// timeFrom:null,
// timeTo:null,
// name:'',
// select1:''
// }